function isValueNumber(val){
    return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*s)|(^-?0{1}$)/).test(value+'');
}


Vue.component('input-number',{
    template:`
    <div class="input-number">
        <input type="text" :value="currentValue" @change="handleChange></input>
        <button @click="handleDown" :disabled="currentValue <= min">-</button>
        <button @click="handldUp" :disabled="currentValue >= max">-</button>
    </div>
    `,
    props:{
        max:{
            type:Number,
            default:Infinity
        },
        min:{
            type:Number,
            default:-Infinity
        },
        value:{
            type:Number,
            dedault:0
        }
    },
    data() {
        return {
            currentValue:this.value
        }
    },
    watch:{
        currentValue:function(val) {
            //出发 v-model 的 input 
            this.$emit('input',val)
            //没有使用到
            this.$emit('on-change',val)
        },
        value:function(){
            this.updateValue(val)
        }
    },
    methods: {
        //防止数据 超出范围
        updateValue:function(val){
            if(val > this.max) val = this.max;
            if(val < this.min) val = this.min;
            this.currentValue = val
        },
        handleDown:function() {
            if(this.currentValue <= this.min) return;
            this.currentValue -=1;
        },
        handldUp:function() {
            if(this.currentValue >= this.max) return;
            this.currentValue +=1;
        },
        handleChange:function(evt) {
            let val = evt.target.value.trim();
            let max = this.max;
            let min = this.min;
            if(isValueNumber(val)){
                val = Number(val);
                this.currentValue = val
                if(val > max) {
                    this.currentValue =max;
                }else if(val<min) {
                    this.currentValue = min;
                }
            }else {
                evt.target.value = this.currentValue;
            }
        }
    },
    mounted:function() {
        this.updateValue(this.value)
    }
})